import load from '@/utils/jsapi.js';
const echartlayersutils = {

  async echartpoints(Parameters) {

    if (Parameters.name == undefined || Parameters.name == null)
      return;
     const [echartsLayer] = await load(["esri/layers/echartsLayer"]);
    if (Parameters.mode.toUpperCase() === 'DELETE') {
      window.echartsdatas = window.echartsdatas.filter(function (item) {
        return item[0] != Parameters.name
      });

      window.mapecharts = window.echartsdatas.filter(function (item) {
        return item[0] != Parameters.name
      });

      const parent = document.getElementsByClassName("esri-view-surface")[0];
      const box = document.getElementById(Parameters.name)
      if (box != null)
        parent.removeChild(box);
    } else {
      
        const elayer = window.echartsdatas.filter(function (item) {
          return item[0] == Parameters.name
        });
        if (Parameters.mode.toUpperCase() === 'ADD') {
          if (!elayer.length) {
            window.echartsdatas.push([Parameters.name, Parameters.datas]);
           
            
             
          } else {
            return
          };
        } else if (Parameters.mode.toUpperCase() === 'UPDATE') {
           if (!elayer.length) {
             return;
           }else{
                 window.echartsdatas = window.echartsdatas.filter(function (item) {
                   return item[0] != Parameters.name
                 });
                 window.echartsdatas.push([Parameters.name, Parameters.datas]);
           }
        }else{
          return;
        }

         const series = [];
         Parameters.datas.forEach(function (item, i) {
           series.push({
             name: 'Top10',
             type: 'effectScatter',
             coordinateSystem: 'arcgis',
             zlevel: 2,
             showEffectOn: 'render',
             rippleEffect: {
               brushType: 'stroke'
             },
             legendHoverLink: true,
             hoverAnimation: true,
             symbol: Parameters.symbol == null || Parameters.symbol == undefined ? 'diamond' : Parameters.symbol,
             cursor: "pointer",
             label: {
               normal: {
                 show: true,
                 position: Parameters.labelposition == null || Parameters.labelposition == undefined ? 'right' : Parameters.labelposition,
                 formatter: '{b}'
               }
             },
             tooltip: {
               padding: 10,
               backgroundColor: '#222',
               borderColor: '#777',
               borderWidth: 1,
               formatter: function (obj) {
                 const value = obj.value;
                 return '<div style="border-bottom:1px solid rgba(255,255,255.3);fontsize:18px;padding-bottom:7px;margin-bottom:7px">' + schema[0].text + ',' + value[0] + '</div>' +
                   schema[1].text + ',' + value[1] + '<br>'
               }
             },
             symbolSize: function (val) {
               return val[2] / 8;
             },
             itemStyle: {
               normal: {
                 color: item.color,
                 shadowBlur: 10,
                 shadowColor: '#333'
               }
             },
             data: [{
               name: item.name,
               value: item.corrd.concat([item.value])
             }]

           });
         });

         const option = {
           title: {
             text: '',
             subtext: '',
             left: 'center',
             textStyle: {
               color: '#fff'
             }
           },
           series: series
         };
         if (Parameters.mode.toUpperCase() === 'ADD') {
          const chart = new echartsLayer(window.sceneView, echarts, Parameters.name);
          chart.setChartOption(option);
          window.mapecharts.push([Parameters.name, chart])
         }else{
             const echartupdate = window.mapecharts.filter(function (item) {
               return item[0] == Parameters.name
             });
             if (echartupdate.length) echartupdate[0][1].setChartOption(option);
         }
    }
  }
}
export default echartlayersutils
